<template>
  <div class="op-container">
    <div class="sensitive_main">
      <div v-for="(item,index) in listData" :key="index" class="sensitive_item">
        <el-input v-model="item.text" placeholder="请输入内容" clearable />
      </div>
      <k-button class="table-btn" value="添加" @click.native="addItem" />

    </div>
    <div class="footer">
      <button v-if="authorityHandle(159)" class="btnStyle" style="cursor: pointer;" @click="setSensitive">保存</button>
    </div>
  </div>
</template>

<script>
import { getLimitStr, setLimitStr } from '@/api/settings/settings.js'
export default {
  data() {
    return {
      listData: []
    }
  },

  created() {
    this.getLimitStr()
  },

  methods: {
    // 获取
    getLimitStr() {
      getLimitStr().then(res => {
        const list = res.data
        const listData = []
        for (let i = 0; i < list.length; i++) {
          listData.push({
            text: list[i]
          })
        }
        this.listData = listData
      })
    },

    // 新增
    addItem() {
      this.listData.push({
        text: ''
      })
    },

    // 保存
    setSensitive() {
      const list = []
      for (let i = 0; i < this.listData.length; i++) {
        if (this.listData[i].text.trim() != '') {
          list.push(this.listData[i].text)
        }
      }
      setLimitStr(list).then(res => {
        this.$message.success('保存成功')
        this.getLimitStr()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  $menuText:#14162E; // 侧边栏字体颜色
  $hoverColor:#1D143C;// 鼠标停留主色调浅色
  $mainColor:#3b425d;// 主色调
  .op-container {
    margin: 20px;
    display: flex;
    flex-direction: column;
    .sensitive_main{
      width: 100%;
      min-height: 500px;
      .sensitive_item{
        width: 150px;
        height: 40px;
        display: inline-block;
        margin: 5px;
      }
      .table-btn{
        margin: 5px;
      }

    }

    .footer {
       text-align: center;
       margin-top: 30px;
     }

  }

</style>
